<!-- 用户中心 -->
<template>
  <div id="usercenter" v-if="usercentershow">
    <div class="background"></div>
    <div class="usercenter-container">
      <div class="usercenter-top">
        <div class="u-background">
          <img :src="userInfo.userProfile" />
        </div>
        <div class="bottom">
          <div class="userAvatar">
            <img :src="userInfo.userProfile" />
            <div
              class="upload-avatar"
              v-if="user.userNo == $route.query.userNo"
            >
              <input
                type="file"
                accept=".jpg, .jpeg, .png"
                @change="uploadProfile"
              />
            </div>
          </div>
          <span class="nickname">{{ userInfo.detail.userNickname }}</span>
          <div class="userCenterDetail" >
            <div class="nameLocal">
              <div >{{userInfo.detail.userGender}}</div>
              <div >{{userInfo.detail.userPlace}}</div>
              <div>{{userInfo.detail.userSchool}}</div>
            </div>
            <div class="userCenterIntro" >简介：{{userInfo.detail.userSynopsis}}</div>
          </div>
          <button v-if="user.userNo == $route.query.userNo" @click="showModal" class="Edit-user-button" >
            <svg t="1626749667518" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3895" width="200" height="200"><path d="M832.38912 606.43328a41.02144 41.02144 0 0 0-17.26464-23.92064l-38.8096-30.28992a249.77408 249.77408 0 0 0 0-64.94208l38.8096-30.26944a41.1648 41.1648 0 0 0 13.14816-54.9888l-56.58624-98.97984a40.52992 40.52992 0 0 0-53.90336-15.9744l-45.28128 18.67776a262.9632 262.9632 0 0 0-55.82848-32.39936l-6.656-49.07008a40.77568 40.77568 0 0 0-40.59136-39.0144h-113.41824a40.71424 40.71424 0 0 0-40.57088 39.03488l-6.67648 49.0496c-19.82464 8.45824-38.58432 19.3536-55.808 32.39936l-45.3632-18.71872a40.46848 40.46848 0 0 0-53.76 15.99488l-56.68864 99.10272a41.18528 41.18528 0 0 0 13.23008 54.8864l38.76864 30.26944a251.904 251.904 0 0 0 0 64.98304l-38.74816 30.28992a41.1648 41.1648 0 0 0-13.18912 55.00928l56.66816 99.04128a40.48896 40.48896 0 0 0 53.84192 15.93344l45.28128-18.67776a264.56064 264.56064 0 0 0 55.84896 32.3584l6.63552 49.07008a40.73472 40.73472 0 0 0 40.52992 39.0144h113.41824a40.71424 40.71424 0 0 0 40.61184-39.0144l6.67648-49.07008a264.64256 264.64256 0 0 0 55.78752-32.3584l45.40416 18.67776a40.46848 40.46848 0 0 0 53.78048-15.9744l56.64768-99.00032a41.53344 41.53344 0 0 0 4.05504-31.1296z m-531.10784-33.5872l-2.53952-14.45888a220.40576 220.40576 0 0 1-3.584-38.64576c0.04096-12.96384 1.26976-25.9072 3.62496-38.66624l2.56-14.47936-59.12576-46.20288 49.9712-87.3472 69.14048 28.48768 11.14112-9.5232a216.22784 216.22784 0 0 1 66.41664-38.58432l13.70112-4.99712 10.11712-74.73152h100.00384l10.11712 74.83392 13.7216 4.97664a214.13888 214.13888 0 0 1 66.39616 38.56384l11.24352 9.56416 68.44416-29.65504 50.5856 88.49408-59.10528 46.16192 2.58048 14.45888a210.3296 210.3296 0 0 1 0 77.27104l-2.53952 14.49984 59.10528 46.16192-49.9712 87.3472-69.16096-28.4672-11.12064 9.50272a215.63392 215.63392 0 0 1-66.43712 38.5024l-13.70112 5.0176-10.07616 74.752h-100.00384l-10.11712-74.752-13.68064-4.97664a215.90016 215.90016 0 0 1-66.4576-38.54336l-11.18208-9.56416-68.48512 29.63456-50.62656-88.39168 59.0848-46.22336-0.04096-0.02048z m0 0" p-id="3896" fill="#048FFA"></path><path d="M569.42592 859.40224h-113.41824a45.7728 45.7728 0 0 1-45.64992-43.9296l-6.20544-45.75232a270.70464 270.70464 0 0 1-51.89632-30.06464l-42.5984 17.57184a45.71136 45.71136 0 0 1-60.23168-18.16576l-56.66816-99.0208a46.26432 46.26432 0 0 1 14.82752-61.8496l36.10624-28.24192a257.65888 257.65888 0 0 1 0-60.49792l-36.47488-28.48768c-20.11136-13.1072-26.66496-40.20224-14.5408-61.46048l56.70912-99.10272a45.69088 45.69088 0 0 1 60.57984-17.98144l42.27072 17.42848a268.5952 268.5952 0 0 1 51.85536-30.1056l6.28736-46.1824c0.96256-24.08448 21.03296-43.39712 45.64992-43.45856h113.41824c24.576 0.06144 44.66688 19.3536 45.71136 43.9296l6.22592 45.75232c18.37056 8.06912 35.81952 18.18624 51.87584 30.1056l42.57792-17.57184a45.09696 45.09696 0 0 1 20.5824-4.95616c16.42496 0 31.6416 8.86784 39.7312 23.12192l56.56576 98.97984a46.24384 46.24384 0 0 1-14.78656 61.82912l-36.16768 28.22144c2.39616 20.0704 2.39616 40.38656 0 60.45696l36.51584 28.50816c9.216 5.98016 16.11776 15.54432 19.06688 26.66496 3.09248 11.63264 1.4336 24.3712-4.58752 34.9184l-56.64768 99.00032a45.73184 45.73184 0 0 1-39.69024 23.10144c-7.24992 0-14.45888-1.78176-20.91008-5.12l-42.2912-17.38752a271.11424 271.11424 0 0 1-51.83488 30.06464l-6.28736 46.24384c-0.96256 24.10496-21.03296 43.39712-45.6704 43.43808z m-215.67488-131.42016l2.33472 1.76128a260.1984 260.1984 0 0 0 54.76352 31.744l2.6624 1.14688 7.02464 51.95776a35.71712 35.71712 0 0 0 35.49184 34.57024h113.39776a35.49184 35.49184 0 0 0 35.49184-34.11968l7.12704-52.4288 2.6624-1.14688a260.5056 260.5056 0 0 0 54.70208-31.744l2.33472-1.76128 48.10752 19.78368a35.51232 35.51232 0 0 0 47.37024-13.76256l56.66816-99.0208c4.68992-8.21248 5.98016-18.14528 3.56352-27.21792a35.77856 35.77856 0 0 0-15.11424-20.93056l-41.45152-32.3584 0.38912-2.90816a244.9408 244.9408 0 0 0 0-63.61088l-0.38912-2.90816 41.12384-32.07168a36.10624 36.10624 0 0 0 11.83744-48.39424l-56.58624-99.00032c-9.1136-16.01536-30.55616-22.58944-47.104-13.96736l-48.41472 19.98848-2.33472-1.76128a256.34816 256.34816 0 0 0-54.72256-31.76448l-2.68288-1.14688-7.0656-51.95776a35.71712 35.71712 0 0 0-35.5328-34.59072h-113.39776a35.49184 35.49184 0 0 0-35.45088 34.11968l-7.12704 52.40832-2.6624 1.14688c-19.43552 8.2944-37.84704 18.98496-54.72256 31.76448l-2.33472 1.76128-48.08704-19.82464a35.59424 35.59424 0 0 0-47.37024 13.78304l-56.70912 99.1232a36.10624 36.10624 0 0 0 11.59168 48.04608l41.41056 32.31744-0.36864 2.90816a247.0912 247.0912 0 0 0 0 63.65184l0.36864 2.90816-41.04192 32.09216a36.12672 36.12672 0 0 0-11.89888 48.39424l56.68864 99.06176c9.07264 15.95392 30.55616 22.40512 47.06304 13.94688l48.39424-19.98848z m213.504 82.8416h-108.9536l-10.30144-76.12416-10.77248-3.91168a220.4672 220.4672 0 0 1-68.01408-39.46496l-8.76544-7.49568-69.75488 30.208-55.0912-96.21504 60.14976-47.04256-2.02752-11.50976a225.91488 225.91488 0 0 1-3.66592-39.50592 220.9792 220.9792 0 0 1 3.70688-39.60832l2.00704-11.40736-60.19072-47.04256 54.41536-95.08864 70.41024 28.99968 8.76544-7.4752a220.42624 220.42624 0 0 1 67.9936-39.50592l10.79296-3.93216 10.30144-76.10368h108.9536l10.30144 76.1856 10.79296 3.93216c24.9856 9.0112 47.86176 22.30272 67.97312 39.48544l8.8064 7.4752 69.7344-30.208 55.05024 96.33792-60.17024 46.98112 2.048 11.42784c4.9152 26.23488 4.9152 52.85888 0 79.11424l-2.00704 11.42784 60.17024 47.0016-54.39488 95.08864-70.43072-28.9792-8.74496 7.4752a219.7504 219.7504 0 0 1-68.01408 39.424l-10.77248 3.93216-10.30144 76.12416z m-100.02432-10.24h91.05408l9.89184-73.37984 16.60928-6.08256a209.44896 209.44896 0 0 0 64.88064-37.60128l13.49632-11.53024 67.87072 27.93472 45.568-79.60576-58.04032-45.32224 3.072-17.5104a204.16512 204.16512 0 0 0 0-75.4688l-3.11296-17.53088 58.04032-45.32224-46.12096-80.67072-67.13344 29.10208-13.68064-11.63264a208.77312 208.77312 0 0 0-64.8192-37.64224l-16.65024-6.0416-9.9328-73.46176h-91.05408l-9.91232 73.35936-16.60928 6.0416a210.59584 210.59584 0 0 0-64.86016 37.6832l-13.53728 11.55072-67.87072-27.9552-45.54752 79.58528 58.04032 45.3632-3.09248 17.48992c-2.29376 12.45184-3.4816 25.14944-3.54304 37.7856 0.06144 12.57472 1.24928 25.27232 3.50208 37.70368l2.33472 13.29152 2.27328 3.01056-3.91168 3.13344-55.58272 43.47904 46.14144 80.5888 67.21536-29.0816 13.6192 11.61216c19.2512 16.36352 41.08288 29.02016 64.86016 37.62176l16.60928 6.0416 9.9328 73.46176z" p-id="3897" fill="#048FFA"></path><path d="M569.4464 864.52224h-113.43872a50.91328 50.91328 0 0 1-50.76992-48.82432l-5.77536-42.45504a276.5824 276.5824 0 0 1-47.90272-27.72992l-39.936 16.46592c-6.38976 3.35872-14.45888 5.3248-22.50752 5.3248-18.24768 0-35.16416-9.8304-44.15488-25.66144l-56.66816-99.0208A51.4048 51.4048 0 0 1 204.8 573.93152l33.4848-26.23488a263.18848 263.18848 0 0 1 0-55.93088l-34.22208-26.7264c-22.03648-14.336-29.30688-44.42112-15.83104-68.03456l56.68864-99.10272c12.92288-22.77376 43.9296-32.11264 67.35872-20.00896l39.2192 16.13824c14.97088-10.8544 31.04768-20.1728 47.88224-27.79136l5.89824-43.35616c1.04448-26.35776 23.3472-47.80032 50.70848-47.88224h113.43872a50.93376 50.93376 0 0 1 50.83136 48.82432l5.77536 42.45504c16.896 7.63904 32.95232 16.95744 47.90272 27.79136l39.936-16.4864c6.41024-3.35872 14.45888-5.3248 22.528-5.3248 18.24768 0 35.18464 9.85088 44.17536 25.72288l56.58624 98.97984a51.34336 51.34336 0 0 1-16.46592 68.64896l-33.52576 26.2144c2.00704 18.57536 2.00704 37.33504 0 55.88992l34.24256 26.74688c9.9328 6.41024 17.59232 17.03936 20.86912 29.3888a51.85536 51.85536 0 0 1-5.05856 38.78912l-56.66816 99.00032a50.83136 50.83136 0 0 1-44.11392 25.68192 51.2 51.2 0 0 1-23.26528-5.67296l-39.2192-16.1792c-14.9504 10.81344-31.00672 20.13184-47.86176 27.7504l-5.91872 43.39712c-1.04448 26.39872-23.3472 47.84128-50.72896 47.90272zM354.5088 722.1248l4.66944 3.54304c16.52736 12.47232 34.57024 22.9376 53.67808 31.10912l5.34528 2.27328 7.41376 54.84544c0.77824 17.26464 14.09024 30.1056 30.43328 30.16704h113.3568a30.37184 30.37184 0 0 0 30.39232-29.20448l7.55712-55.808 5.34528-2.27328a253.5424 253.5424 0 0 0 53.61664-31.10912l4.66944-3.54304 50.81088 20.91008c16.6912 8.51968 33.23904 2.10944 40.98048-11.5712l56.66816-99.0208a31.17056 31.17056 0 0 0-9.91232-41.34912l-44.1344-34.4064 0.75776-5.79584a238.51008 238.51008 0 0 0 0-62.30016l-0.75776-5.79584 43.4176-33.87392c14.4384-9.4208 18.75968-27.56608 10.56768-41.82016l-56.60672-99.0208c-7.76192-13.7216-26.112-19.27168-40.28416-11.96032l-51.52768 21.2992-4.68992-3.54304a252.96896 252.96896 0 0 0-53.63712-31.15008l-5.34528-2.27328-7.43424-54.84544c-0.79872-17.28512-14.1312-30.1056-30.47424-30.16704h-113.39776a30.4128 30.4128 0 0 0-30.35136 29.20448l-7.55712 55.76704-5.34528 2.27328a253.7472 253.7472 0 0 0-53.63712 31.15008l-4.66944 3.54304-50.76992-20.93056c-16.67072-8.51968-33.21856-2.08896-40.96 11.5712l-56.70912 99.14368a30.94528 30.94528 0 0 0 9.95328 41.22624l44.07296 34.38592-0.75776 5.79584a242.44224 242.44224 0 0 0 0 62.34112l0.75776 5.77536-43.35616 33.8944c-14.47936 9.48224-18.82112 27.62752-10.62912 41.82016l56.68864 99.08224c7.80288 13.70112 26.15296 19.23072 40.2432 11.91936l51.54816-21.27872z m217.23136 93.81888h-117.92384l-10.48576-77.49632-7.86432-2.8672a225.21856 225.21856 0 0 1-69.57056-40.36608l-6.36928-5.4272-71.02464 30.74048-59.57632-104.0384 61.21472-47.88224-1.49504-8.45824a231.6288 231.6288 0 0 1-3.74784-40.36608c0.04096-13.63968 1.3312-27.27936 3.7888-40.57088l1.47456-8.33536-61.25568-47.88224 58.85952-102.85056 71.68 29.53216 6.38976-5.46816a225.73056 225.73056 0 0 1 69.57056-40.42752l7.86432-2.8672 10.48576-77.47584h117.88288l10.50624 77.55776 7.90528 2.8672a224.4608 224.4608 0 0 1 69.55008 40.40704l6.38976 5.4272 71.00416-30.76096 59.51488 104.1408-61.21472 47.8208 1.49504 8.3968a219.136 219.136 0 0 1-0.02048 80.95744l-1.45408 8.33536 61.25568 47.8208-58.85952 102.85056-71.68-29.4912-6.36928 5.4272a225.11616 225.11616 0 0 1-69.632 40.36608l-7.84384 2.8672-10.4448 77.5168z m-100.02432-20.48h82.10432l9.728-72.00768 19.49696-7.168a204.51328 204.51328 0 0 0 63.34464-36.67968l15.83104-13.55776 66.64192 27.42272 41.10336-71.82336-56.9344-44.50304 3.60448-20.54144a199.20896 199.20896 0 0 0 0.02048-73.64608l-3.6864-20.60288 56.97536-44.50304-41.63584-72.84736-65.88416 28.54912-16.09728-13.68064a203.63264 203.63264 0 0 0-63.24224-36.72064l-19.5584-7.10656-9.74848-72.11008h-82.10432l-9.74848 71.9872-19.51744 7.10656a206.11072 206.11072 0 0 0-63.2832 36.7616l-15.89248 13.57824-66.60096-27.4432-41.12384 71.86432 56.99584 44.544-3.64544 20.52096c-2.2528 12.1856-3.42016 24.59648-3.46112 36.92544 0.06144 12.22656 1.20832 24.63744 3.42016 36.7616l2.12992 12.12416 4.54656 6.06208-59.98592 46.98112 41.6768 72.76544 65.9456-28.54912 16.03584 13.7216a205.76256 205.76256 0 0 0 63.2832 36.70016l19.51744 7.10656 9.74848 72.00768z" p-id="3898" fill="#048FFA"></path><path d="M569.46688 869.64224h-113.4592a56.03328 56.03328 0 0 1-55.88992-53.71904l-5.34528-39.19872a283.8528 283.8528 0 0 1-43.88864-25.3952l-37.31456 15.38048a53.73952 53.73952 0 0 1-24.45312 5.69344c-20.0704 0-38.7072-10.81344-48.59904-28.2624l-56.64768-99.00032a56.4224 56.4224 0 0 1 18.1248-75.48928l30.90432-24.24832c-1.6384-17.05984-1.6384-34.304 0-51.36384l-31.98976-24.9856c-24.2688-15.7696-31.9488-48.64-17.12128-74.60864l56.70912-99.10272c9.60512-16.95744 29.02016-27.91424 49.43872-27.91424 8.704 0 17.24416 2.048 24.71936 5.89824l36.18816 14.88896a279.92064 279.92064 0 0 1 43.86816-25.47712l5.5296-40.5504c1.1264-29.04064 25.62048-52.224 55.76704-52.3264h113.4592a56.05376 56.05376 0 0 1 55.95136 53.71904l5.36576 39.19872c15.38048 7.12704 30.1056 15.68768 43.88864 25.45664l37.29408-15.38048a53.94432 53.94432 0 0 1 24.4736-5.71392c20.0704 0 38.72768 10.8544 48.64 28.30336l56.56576 98.95936a56.46336 56.46336 0 0 1-18.1248 75.48928l-30.9248 24.20736c1.6384 17.05984 1.6384 34.28352 0 51.3024l32.01024 25.00608c10.71104 6.90176 19.10784 18.69824 22.65088 32.11264a56.97536 56.97536 0 0 1-5.57056 42.61888l-56.66816 99.00032a55.86944 55.86944 0 0 1-74.15808 22.016l-36.20864-14.86848a280.576 280.576 0 0 1-43.84768 25.41568l-5.55008 40.61184c-1.10592 29.06112-25.66144 52.26496-55.78752 52.3264z m-217.23136-129.96608l2.31424 1.65888c14.72512 10.6496 30.53568 19.80416 47.02208 27.2384l2.58048 1.16736 6.144 45.28128a45.93664 45.93664 0 0 0 45.71136 44.38016h113.39776c24.24832-0.06144 44.72832-19.31264 45.64992-42.96704l6.3488-46.6944 2.60096-1.16736a271.5648 271.5648 0 0 0 46.96064-27.2384l2.29376-1.67936 41.86112 17.2032a46.03904 46.03904 0 0 0 60.98944-17.77664l56.68864-99.0208a46.75584 46.75584 0 0 0 4.56704-34.9184 45.40416 45.40416 0 0 0-18.69824-26.39872l-36.864-28.75392 0.3072-2.82624c1.96608-18.18624 1.96608-36.61824 0-54.80448l-0.3072-2.82624 35.75808-27.9552a46.36672 46.36672 0 0 0 15.17568-62.07488l-56.58624-98.97984a45.81376 45.81376 0 0 0-39.7312-23.1424c-7.04512 0-14.37696 1.72032-20.13184 4.75136l-43.02848 17.75616-2.29376-1.67936a267.91936 267.91936 0 0 0-47.0016-27.27936l-2.60096-1.16736-6.16448-45.2608a45.95712 45.95712 0 0 0-45.7728-44.38016h-113.41824c-24.20736 0.06144-44.6464 19.3536-45.58848 42.96704l-6.3488 46.63296-2.58048 1.16736c-16.4864 7.45472-32.29696 16.65024-46.98112 27.29984l-2.31424 1.67936-41.86112-17.24416c-21.62688-11.12064-49.82784-1.82272-60.96896 17.8176l-56.70912 99.1232c-11.89888 20.8896-5.55008 48.3328 14.19264 61.19424l36.82304 28.73344-0.3072 2.82624c-1.9456 18.20672-1.9456 36.6592 0 54.86592l0.3072 2.82624-35.71712 27.99616a46.32576 46.32576 0 0 0-15.21664 62.0544l56.66816 99.04128a45.7728 45.7728 0 0 0 39.71072 23.08096c7.0656 0 14.41792-1.72032 20.13184-4.73088l42.98752-17.77664z m217.16992 109.48608h-113.3568c-19.37408-0.08192-34.65216-15.13472-35.5328-35.06176l-6.98368-51.5072-2.68288-1.1264a261.46816 261.46816 0 0 1-54.76352-31.744l-2.33472-1.76128-48.78336 20.15232a34.05824 34.05824 0 0 1-15.44192 3.62496c-12.82048 0-25.06752-6.9632-31.21152-17.73568l-56.68864-99.08224c-9.70752-16.77312-4.42368-37.70368 12.24704-48.64l40.69376-31.86688-0.38912-2.88768a247.0912 247.0912 0 0 1 0-63.65184l0.38912-2.88768-41.7792-32.58368c-15.58528-10.15808-20.6848-31.25248-11.24352-47.80032l56.7296-99.14368c9.37984-16.56832 29.9008-22.69184 47.73888-13.59872l47.69792 19.64032 2.33472-1.76128a258.49856 258.49856 0 0 1 54.72256-31.76448l2.6624-1.14688 7.168-52.87936a35.36896 35.36896 0 0 1 35.40992-33.64864h113.41824c19.37408 0.06144 34.67264 15.11424 35.59424 35.04128l7.00416 51.5072 2.68288 1.14688c19.456 8.2944 37.888 18.98496 54.72256 31.76448l2.33472 1.76128 48.80384-20.1728c4.42368-2.31424 9.91232-3.62496 15.4624-3.62496 12.86144 0 25.12896 6.98368 31.232 17.79712l56.58624 99.00032c9.70752 16.83456 4.46464 37.76512-12.20608 48.64l-40.7552 31.82592 0.38912 2.88768a243.17952 243.17952 0 0 1 0 63.61088l-0.38912 2.90816 41.82016 32.60416c7.10656 4.62848 12.45184 12.06272 14.76608 20.72576 2.41664 9.03168 1.14688 18.96448-3.56352 27.19744l-56.66816 99.0208c-9.35936 16.5888-29.92128 22.69184-47.73888 13.59872l-47.75936-19.5584-2.31424 1.76128a260.05504 260.05504 0 0 1-54.70208 31.72352l-2.68288 1.14688-7.168 52.92032a35.34848 35.34848 0 0 1-35.47136 33.62816z m-214.13888-132.89472l7.00416 5.3248c16.1792 12.22656 33.87392 22.48704 52.59264 30.47424l8.02816 3.42016 7.80288 57.71264c0.69632 14.80704 11.5712 25.66144 25.37472 25.72288h113.33632a25.23136 25.23136 0 0 0 25.27232-24.28928l8.00768-59.16672 8.00768-3.42016a249.4464 249.4464 0 0 0 52.5312-30.47424l7.00416-5.3248 53.51424 22.03648c14.21312 7.20896 27.81184 2.58048 34.57024-9.35936l56.68864-99.04128a26.0096 26.0096 0 0 0-8.25344-34.5088l-46.7968-36.43392 1.14688-8.704c2.6624-20.23424 2.6624-40.73472 0-60.96896l-1.14688-8.704 45.73184-35.67616c12.36992-8.11008 16.22016-23.1424 9.25696-35.20512l-56.60672-99.04128c-6.18496-10.91584-22.13888-15.7696-33.50528-9.95328l-54.62016 22.58944-7.00416-5.30432a247.9104 247.9104 0 0 0-52.55168-30.5152l-8.02816-3.42016-7.84384-57.71264c-0.69632-14.82752-11.61216-25.68192-25.41568-25.72288h-113.37728a25.27232 25.27232 0 0 0-25.23136 24.30976l-7.9872 59.12576-8.00768 3.42016c-18.65728 7.96672-36.352 18.2272-52.55168 30.5152l-7.00416 5.30432-53.49376-22.05696c-14.1312-7.168-27.77088-2.56-34.57024 9.37984l-56.7296 99.14368a25.8048 25.8048 0 0 0 8.31488 34.38592l46.73536 36.43392-1.14688 8.704c-2.64192 20.23424-2.64192 40.7552 0 61.00992l1.14688 8.68352-45.64992 35.69664c-12.41088 8.15104-16.2816 23.18336-9.33888 35.2256l56.70912 99.10272c4.36224 7.63904 13.12768 12.57472 22.3232 12.57472 3.93216 0 7.76192-0.9216 11.12064-2.6624l54.64064-22.6304z m220.95872 104.79616h-126.8736l-10.67008-78.86848-4.95616-1.80224a230.93248 230.93248 0 0 1-71.14752-41.28768l-3.93216-3.35872-72.31488 31.29344-64.04096-111.86176 62.27968-48.72192-0.94208-5.44768a235.88864 235.88864 0 0 1-3.82976-41.22624 232.448 232.448 0 0 1 3.87072-41.51296l0.9216-5.26336-62.32064-48.72192 63.2832-110.592 72.92928 30.04416 4.01408-3.42016a230.89152 230.89152 0 0 1 71.168-41.34912l4.95616-1.80224 10.67008-78.848h126.83264l10.67008 78.92992 4.97664 1.80224a229.13024 229.13024 0 0 1 71.12704 41.30816l3.93216 3.35872 72.2944-31.3344 63.97952 111.98464-62.27968 48.64 0.96256 5.34528c5.14048 27.42272 5.12 55.296-0.02048 82.80064l-0.9216 5.26336 62.32064 48.66048-63.2832 110.592-72.97024-30.02368-3.97312 3.39968a229.5808 229.5808 0 0 1-71.22944 41.28768l-4.9152 1.78176-10.56768 78.9504z m-117.94432-10.24h108.97408l10.26048-76.14464 10.73152-3.91168a219.4432 219.4432 0 0 0 68.07552-39.46496l8.74496-7.43424 70.41024 28.9792 54.43584-95.1296-60.19072-46.98112 2.00704-11.3664c4.9152-26.3168 4.93568-52.92032 0.02048-79.13472l-2.048-11.4688 60.17024-46.98112-55.05024-96.31744-69.69344 30.208-8.82688-7.4752a218.89024 218.89024 0 0 0-67.95264-39.48544l-10.81344-3.91168-10.32192-76.20608h-108.93312l-10.28096 76.10368-10.77248 3.91168a220.81536 220.81536 0 0 0-68.01408 39.5264l-8.76544 7.49568-70.41024-29.02016-54.41536 95.10912 60.17024 47.04256-2.00704 11.3664c-2.41664 13.06624-3.66592 26.4192-3.70688 39.69024 0.06144 13.14816 1.29024 26.43968 3.66592 39.424l2.02752 11.53024-60.14976 47.04256 55.0912 96.21504 69.75488-30.18752 8.78592 7.4752a220.54912 220.54912 0 0 0 67.9936 39.44448l10.77248 3.91168 10.26048 76.14464z m100.02432-10.24h-91.05408l-9.9328-73.37984-16.60928-6.0416a210.6368 210.6368 0 0 1-64.83968-37.62176l-13.63968-11.65312-67.21536 29.10208-46.14144-80.5888 59.51488-46.61248-2.47808-4.23936-2.12992-12.12416a216.59648 216.59648 0 0 1-3.50208-37.60128 213.8112 213.8112 0 0 1 3.54304-37.888l3.09248-17.46944-58.0608-45.38368 45.54752-79.58528 67.87072 27.9552 13.5168-11.53024a210.5344 210.5344 0 0 1 64.86016-37.6832l16.60928-6.0416 9.9328-73.35936h91.05408l9.91232 73.46176 16.65024 6.0416a208.4864 208.4864 0 0 1 64.8192 37.64224l13.66016 11.61216 67.1744-29.10208 46.10048 80.67072-58.04032 45.32224 3.13344 17.57184a204.71808 204.71808 0 0 1-0.02048 75.48928l-3.05152 17.46944 57.99936 45.34272-45.52704 79.5648-67.91168-27.93472-13.45536 11.53024a209.59232 209.59232 0 0 1-64.9216 37.62176l-16.5888 6.08256-9.87136 73.35936z m-82.1248-10.24h73.15456l9.54368-70.61504 22.40512-8.21248a199.41376 199.41376 0 0 0 61.78816-35.77856l18.2272-15.58528 65.35168 26.89024 36.67968-64.08192-55.88992-43.66336 4.13696-23.552a194.2528 194.2528 0 0 0 0.02048-71.82336l-4.21888-23.69536 55.9104-43.66336-37.1712-65.024-64.57344 27.99616-18.5344-15.7696a198.5536 198.5536 0 0 0-61.66528-35.81952l-22.48704-8.15104-9.56416-70.73792h-73.15456l-9.54368 70.61504-22.4256 8.17152a200.21248 200.21248 0 0 0-61.70624 35.86048l-18.28864 15.60576-65.3312-26.91072-36.67968 64.08192 55.9104 43.70432-4.17792 23.552a203.55072 203.55072 0 0 0-3.3792 36.0448c0.06144 11.93984 1.18784 24.00256 3.33824 35.81952l1.92512 10.93632 6.81984 9.09312-60.45696 47.34976 37.19168 64.94208 64.67584-27.97568 18.47296 15.79008a200.02816 200.02816 0 0 0 61.68576 35.77856l22.44608 8.15104 9.56416 70.67648z" p-id="3899" fill="#048FFA"></path><path d="M512.73728 659.70176c76.51328 0 138.79296-62.81216 138.79296-139.96032 0-77.16864-62.27968-139.91936-138.79296-139.91936-76.55424 0-138.73152 62.75072-138.73152 139.91936 0 77.14816 62.23872 139.96032 138.73152 139.96032z m0-231.3216c49.95072 0 90.60352 40.98048 90.60352 91.36128-0.04096 50.44224-40.59136 91.38176-90.60352 91.38176-49.93024 0-90.58304-40.98048-90.58304-91.38176 0.04096-50.46272 40.59136-91.29984 90.58304-91.36128z m0 0" p-id="3900" fill="#048FFA"></path><path d="M512.73728 664.82176c-79.31904 0-143.85152-65.08544-143.85152-145.08032 0-79.9744 64.53248-145.03936 143.85152-145.03936 79.36 0 143.91296 65.06496 143.91296 145.03936 0 79.99488-64.55296 145.08032-143.91296 145.08032z m0-279.87968c-73.66656 0-133.61152 60.47744-133.61152 134.79936 0 74.36288 59.94496 134.84032 133.61152 134.84032 73.728 0 133.67296-60.47744 133.67296-134.84032 0-74.32192-59.94496-134.79936-133.67296-134.79936z m0 231.30112c-52.77696 0-95.70304-43.27424-95.70304-96.50176 0.04096-53.1456 42.98752-96.41984 95.70304-96.48128 52.77696 0 95.72352 43.27424 95.72352 96.48128-0.04096 53.22752-42.98752 96.50176-95.72352 96.50176z m0.02048-182.74304c-47.08352 0.06144-85.42208 38.74816-85.48352 86.24128 0 47.55456 38.33856 86.24128 85.46304 86.24128 47.104 0 85.44256-38.7072 85.48352-86.26176 0-47.53408-38.33856-86.2208-85.46304-86.2208z" p-id="3901" fill="#048FFA"></path><path d="M512.73728 669.94176c-82.14528 0-148.97152-67.3792-148.97152-150.20032 0-82.78016 66.82624-150.15936 148.97152-150.15936 82.18624 0 149.03296 67.35872 149.03296 150.15936 0 82.82112-66.84672 150.20032-149.03296 150.20032z m0-279.87968c-70.84032 0-128.49152 58.1632-128.49152 129.67936s57.63072 129.72032 128.49152 129.72032c70.88128 0 128.55296-58.20416 128.55296-129.72032 0-71.49568-57.67168-129.67936-128.55296-129.67936z m0 231.30112c-55.6032 0-100.82304-45.58848-100.82304-101.62176 0.06144-55.95136 45.28128-101.53984 100.82304-101.60128 55.6032 0 100.84352 45.58848 100.84352 101.60128-0.04096 56.03328-45.28128 101.62176-100.84352 101.62176z m0.02048-182.74304c-44.27776 0.04096-80.32256 36.4544-80.36352 81.12128 0 44.72832 36.0448 81.12128 80.34304 81.12128 44.27776 0 80.32256-36.39296 80.36352-81.14176 0-44.70784-36.0448-81.1008-80.34304-81.1008z" p-id="3902" fill="#048FFA"></path><path d="M512.73728 675.06176c-84.97152 0-154.09152-69.67296-154.09152-155.32032 0-85.62688 69.12-155.27936 154.09152-155.27936 84.992 0 154.15296 69.65248 154.15296 155.27936 0 85.64736-69.14048 155.32032-154.15296 155.32032z m0-300.35968c-79.31904 0-143.85152 65.06496-143.85152 145.03936 0 79.99488 64.53248 145.08032 143.85152 145.08032 79.36 0 143.91296-65.08544 143.91296-145.08032 0-79.9744-64.55296-145.03936-143.91296-145.03936z m0 279.87968c-73.66656 0-133.61152-60.47744-133.61152-134.84032 0-74.32192 59.94496-134.79936 133.61152-134.79936 73.728 0 133.67296 60.47744 133.67296 134.79936 0 74.36288-59.94496 134.84032-133.67296 134.84032z m0-259.39968c-68.03456 0-123.37152 55.86944-123.37152 124.55936 0 68.68992 55.33696 124.60032 123.37152 124.60032 68.05504 0 123.43296-55.88992 123.43296-124.60032 0-68.68992-55.37792-124.55936-123.43296-124.55936z m0 231.30112c-58.42944 0-105.94304-47.88224-105.94304-106.74176 0.06144-58.7776 47.57504-106.65984 105.92256-106.72128 58.44992 0 105.984 47.86176 105.984 106.72128-0.04096 58.85952-47.57504 106.74176-105.96352 106.74176z m0-203.22304c-52.71552 0.06144-95.6416 43.35616-95.70304 96.48128 0 53.20704 42.94656 96.48128 95.70304 96.48128 52.736 0 95.68256-43.29472 95.72352-96.50176 0-53.18656-42.94656-96.4608-95.72352-96.4608z m0 182.74304c-47.12448 0-85.46304-38.7072-85.46304-86.24128 0.04096-47.5136 38.4-86.20032 85.46304-86.24128 47.12448 0 85.46304 38.68672 85.46304 86.2208-0.02048 47.55456-38.35904 86.26176-85.46304 86.26176z m0.02048-162.26304c-41.45152 0.04096-75.20256 34.14016-75.24352 76.00128 0 41.90208 33.75104 76.00128 75.22304 76.00128 41.43104 0 75.20256-34.0992 75.24352-76.02176 0-41.8816-33.73056-75.9808-75.22304-75.9808z" p-id="3903" fill="#048FFA"></path></svg>
            修改个人信息
          </button>

          <div
            class="follow-him"
            :class="[!followed ? 'not-follow' : 'followed']"
            @click="followhim()"
            v-if="user.userNo != $route.query.userNo"
          >
            {{ follow_him }}
          </div>
          <div
              class="chat-button"
              v-if="user.userNo != $route.query.userNo"
              @click="()=>{toChatByUserNo($route.query.userNo)}"
          >
            <svg t="1627025227826" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4331" width="200" height="200"><path d="M970.56 267.52a85.76 85.76 0 0 0 0-10.24v-2.88l-17.92 1.6 15.68-3.84v-3.52A141.44 141.44 0 0 0 960 227.2a128 128 0 0 0-11.2-20.48 123.84 123.84 0 0 0-103.04-54.72H176.96a123.84 123.84 0 0 0-102.72 55.36 128 128 0 0 0-11.84 22.72 124.8 124.8 0 0 0-6.72 22.72l16 3.2h-16.64a81.92 81.92 0 0 0-1.6 11.84v512a124.48 124.48 0 0 0 124.16 124.16h668.8a124.48 124.48 0 0 0 124.16-124.16v-512zM883.2 304v448a64 64 0 0 1-64 64H205.12a64 64 0 0 1-64-64v-448a64 64 0 0 1 1.92-16l334.4 267.84 2.56 3.2a48.96 48.96 0 0 0 26.88 11.84h6.08a42.24 42.24 0 0 0 31.04-11.84L880.96 288a62.08 62.08 0 0 1 2.24 16zM512 472.96l-290.88-233.6h581.76z" p-id="4332" fill="#ffffff"></path></svg>
          </div>
        </div>
      </div>
      <div class="usercenter-bottom">
        <div class="left">
          <div class="tablist">
            <span
              :class="{ active: selected_option == 1 }"
              @click="selectedOptionChange(1)"
              >{{
                user.userNo == $route.query.userNo ? "我" : "他"
              }}的发布</span
            >
            <span
              :class="{ active: selected_option == 2 }"
              @click="selectedOptionChange(2)"
              >收藏内容</span
            >
            <span
              :class="{ active: selected_option == 3 }"
              @click="selectedOptionChange(3)"
              >关注社区</span
            >
            <span
              :class="{ active: selected_option == 4 }"
              @click="selectedOptionChange(4)"
              >关注用户</span
            >
            <!-- <span :class="{ 'active' : selected_option == 5 }" @click="selectedOptionChange(5)">近期浏览</span>
                        <span :class="{ 'active' : selected_option == 6 }" @click="selectedOptionChange(6)">拉黑内容</span> -->
          </div>
          <topics
            :topicData="posts"
            v-if="selected_option != 3 && selected_option != 4"
            :operationBarVis="false"
          ></topics>
          <subcommunity
            :cardData="subcommunity"
            v-if="selected_option == 3"
          ></subcommunity>
          <div class="sub-users-container" v-if="selected_option == 4">
            <div
              class="sub-users"
              v-for="subuser in subusers"
              :key="subuser.userNo"
              @click="toUserCenter(subuser.userNo)"
            >
              <div class="sub-users-cover">
                <img :src="subuser.userProfile" />
              </div>
              <span class="sub-users-name">
                {{ subuser.userNickname }}
              </span>
            </div>
          </div>
        </div>

        <div class="right">

          <div class="tablist" style="width: 93%">
            <span id="focusInfo">关注信息</span>
          </div>
          <div class="report-sign">
            <div class="report-sum">
              <p style="font-weight: bold;font-size: 30px;margin:0;margin-top:20px;margin-bottom: 5px ;color:rgb(80, 80, 255) ">
                {{collection.data.notifications.length}}</p>
              <p style="margin: 0">关注发帖</p>
            </div>
          </div>
            <div v-if="collection.data.notifications.length!==0">
              <div
                  v-for="collect in collection.data.notifications"
                  :key="collect.notificationId"
                  class="communityReportItem">
                <div class="communityReportItem-content">
                  <p class="clickText" >{{collect.notificationContext}}</p>
                </div>
                <div class="communityReportItem-time" >
                  {{collect.notificationDate}}
                </div>

              </div>

            </div>
            <div v-else class="noComData">
              暂无数据
            </div>
        </div>
      </div>
    </div>
    <confirmwindow
            style="overflow: scroll"
            v-model="EditUservisibility"

            @bodyClose="bodyClose()"
            :bodyClosable="true"
            :width="800"
            :height="600">
          <editper


          ></editper>
        </confirmwindow>
  </div>
</template>

<script>
import editper from "@/components/editor/editper";
import Confirmwindow from "../components/common/pop/cmModal.vue";
import Topics from "../components/common/topics.vue";
import { mapGetters, mapMutations } from "vuex";
import { readImg, compressImg } from "../utils/utils";
import Subcommunity from "../components/homecomponents/subcommunity.vue";
import baseurl from "../requestsetting/services/baseurl";

export default {
  components: { Topics, Subcommunity , Confirmwindow ,editper},
  data() {
    return {
      posts: "",
      subcommunity: "",
      userInfo: {
        detail: {
          userFollowNumber: "",
          userGender: "",
          userInformationNo: "",
          userName: "",
          userNickname: "",
          userNo: "",
          userPlace:"",
          userQq: "",
          userSchool:"",
          userSynopsis: "",
        },
      },
      collection:{},
      selected_option: 1,
      follow_him: "关注",
      followed: false,
      subusers: "",
      usercentershow: true,
      EditUservisibility:false
    };
  },



  computed: {
    ...mapGetters(["user"]),
  },

  methods: {
    showModal() {
      this.EditUservisibility = true;
    },
    bodyClose() {
      this.EditUservisibility = false;
    },
    async getUser() {
      const that = this;
      let userNo = this.$route.query.userNo;
      let userInfo;
      await this.$getApi.getUserInfo(userNo).then((res) => {
        userInfo = res.data.userInformation
        this.getCollection();
        that.$getApi
          .judgeFollow(this.user.userNo, res.data.userInformation.userNo, 1)//判断是否关注过
          .then((res) => {
            if (JSON.stringify(res.data) != "{}") {
              that.followed = !that.followed;
              that.follow_him = "已关注";
            }
          });
      });
      await this.$getApi.getUserDetail(userNo).then((res) => {
        userInfo.detail = res.data.userDetails;


      });


      this.$store.commit('setUserInfo',userInfo)

      this.userInfo = this.$store.getters.userInfo;



    },
    async uploadProfile(e) {
      //上传头像
      const that = this;
      var file = e.target.files[0];
      console.log(file);
      if (file != undefined) {
        const img = await readImg(file);
        const blob = await compressImg(img, file.type, 1000, 1000);
        let param = new FormData();
        param.append("file", blob, "file.jpg");
        console.log(param.get("file"));
        let config = {
          //用form表单形势上传文件
          headers: {
            "Content-Type": "multipart/form-data",
          },
          transformRequest: [
            function (data) {
              return data;
            },
          ],
        };
        this.$getApi.uploadPostPicture(param, config).then((res) => {
          //上传头图并从服务器获得图片地址渲染
          console.log(res);
          that.userInfo.userProfile = baseurl + res.data.file;
          // eslint-disable-next-line no-unused-vars
          let pic = that.userInfo.userProfile;
          let updatedUser = that.user;
          updatedUser.userProfile = pic;
          console.log("updateduser",updatedUser)
          that.setUser(updatedUser);
          that.$getApi.getUserInfo(this.$route.query.userNo).then((res) => {
            let user = res.data.userInformation;
            user.userProfile = pic;
            that.$getApi.setUserInfo(user);
          });
        });
      }
    },
    // eslint-disable-next-line no-unused-vars
    selectedOptionChange(choice) {
      // eslint-disable-next-line no-unused-vars
      const that = this;
      let choicetrue = Number(choice);
      this.selected_option = choice;
      switch (choicetrue) {
        case 1: {
          //用户自己发过的帖子
          this.$getApi.getUserPosts(this.$route.query.userNo).then((res) => {
            that.posts = res.data.posts;
          });
          break;
        }
        case 2: {
          //用户收藏的帖子
          this.$getApi
            .getUserCollections(this.$route.query.userNo)
            .then((res) => {
              that.posts = res.data.posts;
            });
          break;
        }
        case 3: {
          //用户关注的社区
          this.$getApi
            .getUserSubCommunities(this.$route.query.userNo)
            .then((res) => {
              that.subcommunity = res.data.communityInformations;
              that.posts = "";
            });
          break;
        }
        case 4: {
          this.$getApi
            .getUserSubUsers(this.$route.query.userNo, 1)
            .then((res) => {
              let array1 = res.data.userDetails;
              console.log("array1", array1);
              let array2 = res.data.userInformations;
              for (let i = 0; i < array1.length; i++) {
                array1[i].userProfile = array2[i].userProfile;
              }
              that.subusers = array1;
              console.log("subusers", that.subusers);
            });
          break;
        }
        case 5: {
          break;
        }
        case 6: {
          break;
        }
      }
    },
    followhim() {
      //关注用户
      this.followed = !this.followed;
      this.$getApi.followUser(this.user.userNo, this.userInfo.userNo, 1);
      if (this.followed == true) {
        this.follow_him = "已关注";
      } else this.follow_him = "关注";
    },
    intialize() {
      let choice = this.$route.query.choice;
      console.log(choice);
      if (choice == null) choice = 1;
      this.selectedOptionChange(choice);
    },
    toUserCenter(userNo) {
      this.$router.push({ path: "/usercenter", query: { userNo: userNo } });
      location.reload();
    },
    ...mapMutations(["setUser"]),

    toChatByUserNo(userNo) {
      window.sessionStorage.setItem('receiver',userNo)
      this.$getApi.addChatList(window.localStorage.getItem('userNo'),userNo).then(res=>{
        console.log(res)
        this.$router.push('/chat')
      })
    },
    getCollection(){
      const that = this;
      this.$getApi.getSelectToCollection(this.$route.query.userNo).then((res)=> {
        that.collection=res
        this.intialize();
        // that.getUser()


      })
    },
  },

  created() {
    this.getUser();
    // this.getCollection();
  },
};
</script>
<style>
.pStyle{

}
.noComData{
  height: 100%;
  background-color: rgb(251,251,251);
  font-size: 24px;
  padding-top: 55%;
  padding-left: 34%;
  color: #999999;
}
.userCenterIntro{
  margin-top: 12px;
}
.nameLocal{
  width: 100%;
}
.nameLocal div{
  display: inline-block;
  margin-right: 15px;


}
.userCenterDetail{
  position: absolute;
  left: 21%;
  top: 52%;
  font-size: 13px;
  color:#00000040 ;
  width: 360px;
}
img {
  object-fit: cover;
  background-position: center;
  background-size: cover;
}
/* #usercenter{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    overflow-y: scroll;
} */
#usercenter > .background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(246, 246, 246);
  z-index: -10;
}
.usercenter-container {
  position: relative;
  margin: 5rem auto;
  padding: 0 16px;
  width: 1000px;
  height: 80%;
  z-index: 10;
}
/* 上半部分 */
.usercenter-top {
  margin: 2px;
  min-width: 100px;
  height: 260px;
  width: 1000px;
  box-shadow: 0 1px 3px rgba(18, 18, 18, 0.1);
  display: block;
  position: relative;
  z-index: 50;
}
.usercenter-top > .u-background {
  height: 130px;
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
.usercenter-top > .u-background > img {
  height: 130px;
  width: 100%;
  filter: blur(10px);
  padding: -100px;
  transform: scale(1.2);
}
.usercenter-top > .bottom {
  height: 130px;
  width: 100%;
  display: block;
  background-color: white;
  position: relative;
  display: flex;
  align-items: flex-start;
}
.usercenter-top > .bottom > .userAvatar {
  height: 168px;
  width: 168px;
  background-color: white;
  border-radius: 8px;
  transform: translate3d(15px, -82px, 0);
  display: inline-block;
  margin-right: 20px;
  position: relative;
  z-index: 20;
}
.usercenter-top > .bottom > .userAvatar > img {
  margin: 4px 4px;
  width: 160px;
  height: 160px;
  border-radius: 8px;
}
.usercenter-top > .bottom > .userAvatar > .upload-avatar {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 21;
}
.usercenter-top > .bottom > .userAvatar > .upload-avatar > input {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  border: none;
  outline: none;
  z-index: 22;
}
.usercenter-top > .bottom > .userAvatar > .upload-avatar:hover::after {
  content: "点击上传新头像";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(255, 255, 255, 0.925);
  background-color: rgba(0, 0, 0, 0.156);
  height: 168px;
  width: 168px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  line-height: 168px;
  backdrop-filter: blur(10px);
  z-index: 21;
}
.usercenter-top > .bottom > .nickname {
  width: calc(100% - 200px);
  height: 40px;
  color: black;
  font-size: 26px;
  font-weight: 700;
  position: relative;
  top: 20px;
  left: 20px;
}
.usercenter-top > .bottom > .follow-him {
  width: 55px;
  height: 24px;
  border-radius: 12px;
  cursor: pointer;
  position: absolute;
  right: 85px;
  bottom: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.not-follow {
  background-color: rgb(4, 143, 250);
  color: white;
}
.followed {
  background-color: white;
  color: rgb(99, 99, 99);
  border: 1px rgb(194, 194, 194) solid;
}
.chat-button {
  display: flex;
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 55px;
  height: 24px;
  border-radius: 12px;
  font-size: 14px;
  border: none;
  outline: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: rgb(4, 143, 250);
  /*color: white;*/
}

/* 上半部分 */

/* 下半部分 */
.usercenter-bottom {
  width: 1000px;
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}
.usercenter-bottom > .left {
  margin: 2px;
  width: 694px;
  max-height: 680px;
}
.usercenter-bottom > .left > .tablist {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  background-color: white;
  position: sticky;
  top: clac(5rem + 2px);
  padding: 10px 0px 10px 20px;
  display: flex;
  align-items: center;
}
.usercenter-bottom > .left > .tablist > span {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
  padding: 0 10px;
  cursor: pointer;
}
.usercenter-bottom > .left > .tablist > .active {
  color: rgb(4, 143, 250);
}
.sub-users {
  width: 100%;
  height: 40px;
  background-color: white;
  border-bottom: 1px rgb(236, 236, 236) solid;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
}
.sub-users-cover {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  margin-right: 10px;
  margin-left: 30px;
}
.sub-users-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
  background-size: cover;
}
.sub-users-name {
  font-size: 16px;
  font-weight: 600;
}
.Edit-user-button{

  position: absolute;
  left: 85%;
  top: 10%;
  border:0;
  font-size: 16px;
  background-color: white;
  color: rgb(4, 143, 250);
  cursor: pointer;
}
.Edit-user-button:hover{

  position: absolute;
  left: 85%;
  top: 10%;
  border:0;
  font-size: 16px;
  background-color: white;
  color: rgb(4, 143, 250);
  cursor: pointer;
  opacity: 0.7;
}

.usercenter-bottom > .right > .tablist > .active {
  color: rgb(4, 143, 250);
}
.usercenter-bottom > .right > .tablist > span {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
  padding: 0 10px;
  cursor: pointer;
  border-left: 5px rgb(80, 80, 255) solid;
}
.usercenter-bottom > .right > .tablist {
  width: 100%;
  height: 40px;
  background-color: white;
  position: sticky;
  top: clac(5rem + 2px);
  padding: 10px 0px 10px 20px;
  display: flex;
  align-items: center;
}
.usercenter-bottom> .right{
  margin-left: 20px;
  width: 285px;
  max-height: 680px;
}
</style>
